import React, { Component } from 'react'
import ReactDOM from 'react-dom'

// export default class Demo extends Component {
//   state = {
//     count: 0
//   }

//   myRef = React.createRef()

//   add = () => {
//     this.setState((state)=>({count:state.count + 1}))
//   }

//   alertData=() => {
//     alert(this.myRef.current.value)
//   }
  
  
//   render() {
//     return (
//       <div>
//         <h3>当前求和为：{this.state.count}</h3>
//         <input type="text" ref={this.myRef}/>
//         <button onClick={this.add}>点我加1</button>
//         <button onClick={this.alertData}>提示数据</button>
//       </div>
//     )
//   }
// }


// ref Hook 案例
export default function Demo(){
  console.log("demo调用") // 一直会调用

  
  const [count, setCount] = React.useState(0)  // React.useState(0)底层做了处理，第一次调用时被赋值，后续都取最新的
  const [name, setName] = React.useState('tom')

  const myref = React.useRef()

  function add(){
    // setCount(count + 1) // 第一种写法
    setCount((count)=>count + 1)  // 第二种写法
  }

  function showName(){
    alert(myref.current.value)
  }

  return (
    <div>
      <h3>当前求和为：{count}</h3>
      <input type="text" ref={myref} />
      <button onClick={add}>点我加1</button>
      <button onClick={showName}>点我提示姓名</button>

    </div>
  )
}

/**
 * 
 // effect Hook 案例
export default function Demo(){
  console.log("demo调用") // 一直会调用

  const [count, setCount] = React.useState(0)  // React.useState(0)底层做了处理，第一次调用时被赋值，后续都取最新的
  // const [name, setName] = React.useState('tom')

  // 检测所有状态更新，只要有变化，就会调用, 相当于两种功能 didMount, didupdate
  // React.useEffect(()=>{
  //   console.log("useEffect")
  // })

  //那个状态也不检测 只会执行一次 相当于dismount
  // React.useEffect(()=>{
  //   setInterval(()=>{
  //     setCount((count)=>count + 1) 
  //   },500)
  // },[])

  //检测特定状态更新，只要有变化，就会调用 相当于didmount, didUpdate
  // React.useEffect(()=>{
  //   console.log("useEffect")
  // },[count])

  //那个状态也不检测 只会执行一次 相当于dismount
  React.useEffect(()=>{
    let timeId = setInterval(()=>{
      setCount((count)=>count + 1) 
    },500)
    return ()=>{             // 返回 回调函数相当于卸载前要执行的动作willUnmount
      clearInterval(timeId)
    }
  },[])


  function add(){
    // setCount(count + 1) // 第一种写法
    setCount((count)=>count + 1)  // 第二种写法
  }

  // 卸载组件的的回调
  function unmount(){
    ReactDOM.unmountCompoentAtNode(document.getElementById('root')) // 注意在高版本的React里面此函数已被废弃
  }

  return (
    <div>
      <h3>当前求和为：{count}</h3>
      <button onClick={add}>点我加1</button>
      <button onClick={unmount}>卸载组价</button>
    </div>
  )
}
 */


// State Hook 案例
// export default function Demo(){
//   console.log("demo调用") // 一直会调用

  
//   const [count, setCount] = React.useState(0)  // React.useState(0)底层做了处理，第一次调用时被赋值，后续都取最新的
//   const [name, setName] = React.useState('tom')

//   function add(){
//     // setCount(count + 1) // 第一种写法
//     setCount((count)=>count + 1)  // 第二种写法
//   }

//   function changeName(){
//     setName((name) => {
//       return "jake"
//     }
//     )
//   }

//   return (
//     <div>
//       <h3>当前求和为：{count}</h3>
//       <h3>我的名字是: {name}</h3>
//       <button onClick={add}>点我加1</button>
//       <button onClick={changeName}>点我改名</button>

//     </div>
//   )
// }
